<template>
  <div id="resourceManagement">
    <div id="tabelTitle">
      缴费确认
    </div>
    <div id="table">
      <avue-crud
        v-model="form"
        :search.sync="searchForm"
        :page.sync="page"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        @on-load="getList"
        @search-change="searchChange"
        @refresh-change="refreshChange"
        @size-change="sizeChange"
        @current-change="currentChange"
        @row-update="handleUpdate"
        @row-save="handleSave"
        @row-del="rowDel"
      >
        <template slot-scope="{disabled,size}" slot="stuNameSearch">
          <div class="inputStyle">
            <el-input placeholder="请输入姓名或手机号" :disabled="disabled" :size="size" style="width:50%; "
                      v-model="searchForm.keyWord"></el-input>
          </div>
        </template>
        <template v-if="row.status==104" slot="menu" slot-scope="{row,size}">
          <el-button type="primary" :size="size" @click="examine(row.payfeeId)">确认缴费</el-button>
        </template>
      </avue-crud>
    </div>
    <el-dialog
      title="确认缴费"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="30%"
     >
      <avue-form ref="formForm" v-model="formForm" :option="formOption"  @submit="submit" >
      </avue-form>
      <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>
  </div>
</template>

<script>
import tableMixins from "@/mixins/tableMixin.vue"

export default {
  name: "paymentConfirm",
  mixins: [tableMixins],
  data() {
    return {
      form: {},
      data: [],
      //访问接口前缀
      url: "yuanjiu.testnew/tn-fee-confirm",
      searchForm: {},
      // 表格参数
      tableOption: {
        labelWidth:200,
        searchSpan:6,
        border: true,
        index: false,
        indexLabel: '序号',
        indexWidth: 50,
        stripe: true,
        align: 'center',
        searchMenuSpan:10,
        // searchLabelWidth: 100,
        calcHeight: 300,
        dialogWidth: 900,
        menuWidth: 200,
        menu: true,
        menuAlign: 'center',
        refreshBtn: false,
        columnBtn: false,
        searchShowBtn: false,
        selection: true,
        rowKey: "id",
        addBtn: false,
        emptyBtn: true,
        editBtn: false,
        delBtn: false,
        viewBtn: true,
        emptyBtnText: "重置",
        editBtnText: "修改",
        maxHeight: 645000,
        searchSize: "medium",
        column: [
          {
            prop: 'stuName',
            label: '姓名',
            search: true,
            searchLabelWidth:'50'
          },
          {
            prop: 'phoneNum',
            label: '手机号',
          },
          {
            prop: 'productId',
            label: '培训类别',
            type: "select",
            dicUrl: '/yuanjiu.testnew/tn-product/listTnProduct',
            dicMethod: 'post',
            props: {
              label: 'productName',
              value: 'productId',
              res: 'result'
            },
            rules: [{
              required: true,
              message: "请选择培训类别",
              trigger: "change"
            }]
          },
          {
            label: "班级名称",
            prop: "classId",
            search:true,
            searchLabelWidth:'80',
            type: "select",
            span: 24,
            dicUrl: '/yuanjiu.testnew/tn-class/listTnClass',
            dicMethod: 'post',
            props: {
              label: 'className',
              value: 'classId',
              res: 'result'
            },
            rules: [{
              required: true,
              message: "请选择类型",
              trigger: "change"
            }]
          },
          {
            prop: 'belongUserName',
            label: '咨询师',
          }

          ,
          {
            prop: 'payAmt',
            label: '应缴金额',
          }
          ,
          {
            prop: 'payTypeCode',
            label: '缴费方式',
            type: "select",
            search:true,
            searchLabelWidth:'80',
            dicUrl: '/yuanjiu.testnew/yj-config/getConfigByCode?itmCode=PAY_TYPE',
            props: {
              label: "itmName",
              value: "itmVal",
              res: "result"
            }
          },
          {
            prop: 'status',
            label: '状态',
            type: "select",
            search:true,
            searchLabelWidth:'50',
            dicUrl: '/yuanjiu.testnew/yj-config/getConfigByCode?itmCode=PAY_CONFIRM_STS',
            props: {
              label: "itmName",
              value: "itmVal",
              res: "result"
            }
          },
          {
            prop: 'payTime',
            label: '缴费时间',
            type: "date",
            format:'yyyy-MM-dd',
            valueFormat:'yyyy-MM-dd'
          },

        ]
      },
      listUrl: 'pageTnFeeConfirm',
      delUrl: "deleteList",
      delIdList: [],
      //表单
      dialogVisible: false,
      formForm: {},
      formOption: {
        column: [
          {
            label: "缴费结果",
            prop: "status",
            type: "select",
            dicUrl: '/yuanjiu.testnew/yj-config/getConfigByCode?itmCode=CONFIRM_STATUS',
            props: {
              label: "itmName",
              value: "itmVal",
              res: "result"
            },
            span: 24,
            rules: [{
              required: true,
              message: "请选择缴费结果",
              trigger: "change"
            }],
          },
          {
            label: "缴费方式",
            prop: "payTypeCode",
            type: "select",
            span: 24,
            dicUrl: '/yuanjiu.testnew/yj-config/getConfigByCode?itmCode=PAY_TYPE',
            props: {
              label: "itmName",
              value: "itmVal",
              res: "result"
            },
            rules: [{
              required: true,
              message: "请选择缴费方式",
              trigger: "change"
            }],
          },
          {
            label: "应缴金额",
            prop: "payAmt",
            span: 24,
            rules: [{
              required: true,
              message: "请输入应缴金额",
              trigger: "blur"
            }],
          }
        ]
      }
    }
  },
  methods:{
    examine(payfeeId){
      this.formForm.payfeeId = payfeeId
      this.dialogVisible =true
    },
    submit(){
      this.$httpService.post('/yuanjiu.testnew/tn-fee-confirm/confirmPayInf', {
        payAmt:this.formForm.payAmt,
        payTypeCode:this.formForm.payTypeCode,
        payfeeId:this.formForm.payfeeId,
        status:this.formForm.status
      }).then(res => {
        this.$message.success('操作成功');
        this.dialogVisible = false
        this.getList()
      })
    }
  }
}
</script>

<style scoped>
.inputStyle{
  width: 600px;
}
@media only screen and (max-width: 1600px){
  .inputStyle{
    width: 530px;
  }
}
@media only screen and (max-width: 1500px){
  .inputStyle{
    width: 430px;
  }
}
@media only screen and (max-width: 1366px){
  .inputStyle{
    width: 330px;
  }
}
@media only screen and (max-width: 900px){
  .inputStyle{
    width: 600px;
  }
}

</style>
